{% extends 'base.html' %}
{% block content %}

    <style>
        body{
            background-color: #eeeeee;
            margin: 0;
            font-size: 16px;
        }
        .tm{
            height: 50px;
        }
        .logo{
            float: left;
        }
        .siogan{
            float: right;
        }
        .dh{
            display: inline-block;
        }
        .dl{
            display: inline-block;
        }
        .tm{
            background-color: aqua;
        }
        .dhl{
            background-color: #1b93d1;
        }
        .tp{
            margin-left: 20px;
            margin-top: 10px;
            height: 343px;
            background-color: aqua;
            width: 951px;
        }
        .zhong1{
            display: flex;              /* 使用 flex 布局 */
            align-items: center;
            border: solid 1px #cccccc;
            height: 240px;
            width: 951px;
            background-color: whitesmoke;
            margin-top: 10px;
            margin-left: 20px;
        }
        .pailie{
            overflow: hidden;
            text-overflow: ellipsis;
            display:-webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .zhong1:first-child {
            margin-top: 60px;  /* 只设置第一个元素的上边距 */
        }

        .img_box {float: left;
            margin-right: 20px;
        }

        .text_box {
            /*flex: 1; !* 使文本盒子占据剩余空间 *!*/
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* 确保标题靠上对齐 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }


        .title {
            font-size: 1.5em;
            margin: 0 0 10px 0;
        }

        .description {
            font-size: 1em;
            line-height: 1.6; /* 提高阅读性 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .sousuo{
            height: 75px;
            width: 320px;
            background-color: #563d7c;
            position: absolute;
            top: 0;
            right: -20px;
        }
        .sousuo input{
            width: 200px;
            color: #4e4a4a;
            margin: 15px;
            line-height: 40px;
            border-radius: 5px;
            border: 0;
        }
        .sousuo button{
            color: white;
            border-radius: 5px;
            height: 40px;
            width: 60px;
            border: solid 1px transparent;
            background-color: #006fff;
        }
        .tuij{
            height: 290px;
            width: 320px;
            background-color: #ffffff;
            position: absolute;
            top: 90px;
            right: -20px;
        }
        .tuij1{
            height: 290px;
            width: 320px;
            background-color: #ffffff;
            position: absolute;
            top: 390px;
            right: -20px;
        }
        .wz{
            color: white;
            background-color: black;
            height: 45px;
            border-bottom: solid 1px red;
            line-height: 45px;
            padding-left: 10px;
        }
        ul li{
            text-align: center;
            list-style: none;
            display: inline-block;
            width: 48px;
            height: 40px;
            background-color: white;
        }
        ol li{
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid black;
        }
        a{
            height: 100%;
            color: black;
        }
        a:hover{
            color: #1b93d1;
        }
        .paginate{
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .paginate a{
            line-height: 40px;
            text-align: center;

        }
        .active{
            line-height: 40px;
            background-color: blue;
            color: white;
        }
        .active1{
            line-height: 40px;
        }
    </style>
<body>
<div class="tp">
    <img src="/index_logo.JPG" alt="" style="width: 951px; height: auto;">
    </div>
<div class="zhong">
    <a href="article/articles[i].articleid">
        <div class="zhong1">
    <div class="img_box"><img src="/list_logo.JPG" style="width: 383px; height: auto;"></div>
        <div class="text_box">
            <h4 id="biao1" class="title">这是一个标题</h4>
            <p class="pailie">
                <span>作者：张三</span>&nbsp;&nbsp;&nbsp;
                <span>类别：Python开发</span>&nbsp;&nbsp;&nbsp;
                <span>日期：2024-11-08</span>&nbsp;&nbsp;&nbsp;
                <span>阅读：100次</span>&nbsp;&nbsp;&nbsp;
                <span>消耗积分：</span>&nbsp;&nbsp;&nbsp;
            </p>
            <p class="description">
            PythonWeb开发是使用Python语言进行Web应用程序开发的过程。Python是一种简洁、易读且功能强大的编程语言，因此在Web开发领域广受欢迎。PythonWeb开发可以涵盖多...
            </p>
        </div>
        </div>
    </a>
</div>
<div class="col-12 paginate">
    <ul class="page-num-nav">
        <li><a href="#">上一页</a></li>
        <li class="active"><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</div>
<!--<div class="zhong">-->
<!--    <a href="">-->
<!--        <div class="zhong1">-->
<!--    <div class="img_box"><img src="/list_logo.JPG" style="width: 383px; height: auto;"></div>-->
<!--        <div class="text_box">-->
<!--            <h4 id="biao1" class="title">这是一个标题</h4>-->
<!--            <p>-->
<!--                <span>作者：张三</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>类别：Python开发</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>日期：2024-11-08</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>阅读：100次</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>消耗积分：</span>&nbsp;&nbsp;&nbsp;-->
<!--            </p>-->
<!--            <p class="description">-->
<!--            PythonWeb开发是使用Python语言进行Web应用程序开发的过程。Python是一种简洁、易读且功能强大的编程语言，因此在Web开发领域广受欢迎。PythonWeb开发可以涵盖多...-->
<!--            </p>-->
<!--        </div>-->
<!--        </div>-->
<!--    </a>-->
<!--</div>-->
<!--<div class="zhong">-->
<!--    <a href="">-->
<!--        <div class="zhong1">-->
<!--    <div class="img_box"><img src="/list_logo.JPG" style="width: 383px; height: auto;"></div>-->
<!--        <div class="text_box">-->
<!--            <h4 id="biao1" class="title">这是一个标题</h4>-->
<!--            <p>-->
<!--                <span>作者：张三</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>类别：Python开发</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>日期：2024-11-08</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>阅读：100次</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>消耗积分：</span>&nbsp;&nbsp;&nbsp;-->
<!--            </p>-->
<!--            <p class="description">-->
<!--            PythonWeb开发是使用Python语言进行Web应用程序开发的过程。Python是一种简洁、易读且功能强大的编程语言，因此在Web开发领域广受欢迎。PythonWeb开发可以涵盖多...-->
<!--            </p>-->
<!--        </div>-->
<!--        </div>-->
<!--    </a>-->
<!--</div>-->
<!--<div class="zhong">-->
<!--    <a href="">-->
<!--        <div class="zhong1">-->
<!--    <div class="img_box"><img src="/list_logo.JPG" style="width: 383px; height: auto;"></div>-->
<!--        <div class="text_box">-->
<!--            <h4 id="biao1" class="title">这是一个标题</h4>-->
<!--            <p>-->
<!--                <span>作者：张三</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>类别：Python开发</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>日期：2024-11-08</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>阅读：100次</span>&nbsp;&nbsp;&nbsp;-->
<!--                <span>消耗积分：</span>&nbsp;&nbsp;&nbsp;-->
<!--            </p>-->
<!--            <p class="description">-->
<!--            PythonWeb开发是使用Python语言进行Web应用程序开发的过程。Python是一种简洁、易读且功能强大的编程语言，因此在Web开发领域广受欢迎。PythonWeb开发可以涵盖多...-->
<!--            </p>-->
<!--        </div>-->
<!--        </div>-->
<!--    </a>-->
<!--</div>-->
<div class="ss">
    <div class="sousuo">
        <input type="text" placeholder="请输入关键字" id="searchInput">
        <button onclick="searchDate()">搜索</button>
    </div>
    <div class="tuij">
    <div class="wz">最新文章</div>
        <ol>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
        </ol>
    </div>
    <div class="tuij1">
    <div class="wz">特别推荐</div>
        <ol>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
            <li>web系统开发框架特性对比分</li>
        </ol>
    </div>
</div>

<script src="/js/jquery-3.1.1.js"></script>
<script>
    $(document).ready(function (){
        // alert('文档就绪函数是否OK');
        $.ajax({
            url:"article/list/1",
            type:"POST",
            dataType:"json",
            data:{},
            success:function (data){
                if (data.code == 1){
                    let articles = data.info;
                    let html_str = "";
                    for (let i = 0; i < articles.length; i++){
                        content = ""
                        let p = document.createElement("p");
                        p.innerHTML = articles[i].content;
                        content = p.innerText.replaceAll('\n', '')
                        html_str += '<div class="zhong1">\n '+
                            '<a href="article/' + articles[i].articleid + ' "> '+
                            '<div class="img_box">' +
                            '<img src="/list_logo.JPG" style="width: 383px; height: auto;">' +
                            '</div>\n' +
                            '        <div class="text_box">\n' +
                            '            <h4 id="biao3" class="title">'+articles[i].headline+'</h4>\n' +
                            '            <p class="pailie">\n' +
                            '                <span>作者：'+articles[i].nickname+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>类别：'+articles[i].type+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>日期：'+articles[i].updatetime+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>阅读：'+articles[i].readcount+'次</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>消耗积分：'+articles[i].credit+'分</span>&nbsp;&nbsp;&nbsp;\n' +
                            '            </p>\n' +
                            '            <p class="description">\n' + content + '\n' +
                            '            </p>\n' +
                            '        </div>' +
                            ' </a>'+
                            '</div>'
                    }
                    console.log(html_str);
                    $('.zhong').empty();
                    $('.zhong').append(html_str);

                    let page_str = '<ul class="page-num-nav">';
                    let max_page = data.page.max_page;
                    let now_page = data.page.now_page;
                    if (now_page == 1){
                        page_str += '<li><sapn class="active1">上一页</sapn></li>';
                        page_str += '<li class="active" aria-current="page"><sapn >1</sapn></li>';
                        page_str += '<li><a href="javascript:getData(2)">2</a></li>';
                        page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                        page_str += '<li><a href="javascript:getData(2)">下一页</a></li>';
                    }else if(now_page == 2){
                        page_str += '<li><a href="javascript:getData(1)">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData(1)">1</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn >2</sapn></li>';
                        page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                        page_str += '<li><a href="javascript:getData(4)">4</a></li>';
                        page_str += '<li><a href="javascript:getData(3)">下一页</a></li>';
                    }else if(now_page == max_page){
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+now_page-2+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+now_page-1+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><sapn>下一页</sapn></li>';
                    }else if (now_page == max_page-1){
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+now_page-2+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+now_page-1+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">'+now_page+1+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">下一页</a></li>';
                    }else{
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+now_page-2+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+now_page-1+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">'+now_page+1+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+2)+')">'+now_page+2+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">下一页</a></li>';
                    }


                    page_str += '</ul>'
                    $('.paginate').empty();
                    $('.paginate').append(page_str);


                }else {
                    alert("当前没有数据")
                }
            },
            error:function (e){
                alert("网络请求失败，请检查网络");
            }
        });
    })
    function getData(page_num) {
        let param = "keyword=" + $("#searchInput").val()
        $.post('article/list/' + page_num, param, function (data) {
            if (data.code == 1) {
                let articles = data.info;
                let html_str = "";
                for (let i = 0; i < articles.length; i++) {
                    content = ""
                    let p = document.createElement("p");
                    p.innerHTML = articles[i].content;
                    content = p.innerText.replaceAll('\n', '')
                    html_str += '<div class="zhong1">\n ' +
                        '<a href="article/' + articles[i].articleid + ' "> ' +
                        '<div class="img_box">' +
                        '<img src="/list_logo.JPG" style="width: 383px; height: auto;">' +
                        '</div>\n' +
                        '        <div class="text_box">\n' +
                        '            <h4 id="biao3" class="title">' + articles[i].headline + '</h4>\n' +
                        '            <p class="pailie">\n' +
                        '                <span>作者：' + articles[i].nickname + '</span>&nbsp;&nbsp;&nbsp;\n' +
                        '                <span>类别：' + articles[i].type + '</span>&nbsp;&nbsp;&nbsp;\n' +
                        '                <span>日期：' + articles[i].updatetime + '</span>&nbsp;&nbsp;&nbsp;\n' +
                        '                <span>阅读：' + articles[i].readcount + '次</span>&nbsp;&nbsp;&nbsp;\n' +
                        '                <span>消耗积分：' + articles[i].credit + '分</span>&nbsp;&nbsp;&nbsp;\n' +
                        '            </p>\n' +
                        '            <p class="description">\n' + content + '\n' +
                        '            </p>\n' +
                        '        </div>' +
                        ' </a>' +
                        '</div>'
                }
                console.log(html_str);
                $('.zhong').empty();
                $('.zhong').append(html_str);

                let page_str = '<ul class="page-num-nav">';
                let max_page = data.page.max_page;
                let now_page = data.page.now_page;
                if (now_page == 1) {
                    page_str += '<li><sapn class="active1">上一页</sapn></li>';
                    page_str += '<li class="active" aria-current="page"><sapn >1</sapn></li>';
                    page_str += '<li><a href="javascript:getData(2)">2</a></li>';
                    page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                    page_str += '<li><a href="javascript:getData(2)">下一页</a></li>';
                } else if (now_page == 2) {
                    page_str += '<li><a href="javascript:getData(1)">上一页</a></li>';
                    page_str += '<li><a href="javascript:getData(1)">1</a></li>';
                    page_str += '<li class="active" aria-current="page"><sapn >2</sapn></li>';
                    page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                    page_str += '<li><a href="javascript:getData(4)">4</a></li>';
                    page_str += '<li><a href="javascript:getData(3)">下一页</a></li>';
                } else if (now_page == max_page) {
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">上一页</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 2) + ')">' + (now_page - 2) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">' + (now_page - 1) + '</a></li>';
                    page_str += '<li class="active" aria-current="page"><sapn>' + (now_page) + '</sapn></li>';
                    page_str += '<li><sapn>下一页</sapn></li>';
                } else if (now_page == max_page - 1) {
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">上一页</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 2) + ')">' + (now_page - 2) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">' + (now_page - 1) + '</a></li>';
                    page_str += '<li class="active" aria-current="page"><sapn>' + (now_page) + '</sapn></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page + 1) + ')">' + (now_page + 1) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page + 1) + ')">下一页</a></li>';
                } else {
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">上一页</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 2) + ')">' + (now_page - 2) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page - 1) + ')">' + (now_page - 1) + '</a></li>';
                    page_str += '<li class="active" aria-current="page"><sapn>' + now_page + '</sapn></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page + 1) + ')">' + (now_page + 1) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page + 2) + ')">' + (now_page + 2) + '</a></li>';
                    page_str += '<li><a href="javascript:getData(' + (now_page + 1) + ')">下一页</a></li>';
                }
                page_str += '</ul>'
                $('.paginate').empty();
                $('.paginate').append(page_str);


            } else {
                alert("当前没有数据")
            }
        })

    }

    function searchDate() {

        let param = "keyword="+$("#searchInput").val()
        $.post('article/list/1', param, function (data) {

                if (data.code == 1){
                    let articles = data.info;
                    let html_str = "";
                    for (let i = 0; i < articles.length; i++){
                        content = ""
                        let p = document.createElement("p");
                        p.innerHTML = articles[i].content;
                        content = p.innerText.replaceAll('\n', '')
                        html_str += '<div class="zhong1">\n '+
                            '<a href="article/' + articles[i].articleid + ' "> '+
                            '<div class="img_box">' +
                            '<img src="/list_logo.JPG" style="width: 383px; height: auto;">' +
                            '</div>\n' +
                            '        <div class="text_box">\n' +
                            '            <h4 id="biao3" class="title">'+articles[i].headline+'</h4>\n' +
                            '            <p class="pailie">\n' +
                            '                <span>作者：'+articles[i].nickname+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>类别：'+articles[i].type+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>日期：'+articles[i].updatetime+'</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>阅读：'+articles[i].readcount+'次</span>&nbsp;&nbsp;&nbsp;\n' +
                            '                <span>消耗积分：'+articles[i].credit+'分</span>&nbsp;&nbsp;&nbsp;\n' +
                            '            </p>\n' +
                            '            <p class="description">\n' + content + '\n' +
                            '            </p>\n' +
                            '        </div>' +
                            ' </a>'+
                            '</div>'
                    }
                    console.log(html_str);
                    $('.zhong').empty();
                    $('.zhong').append(html_str);

                    let page_str = '<ul class="page-num-nav">';
                    let max_page = data.page.max_page;
                    let now_page = data.page.now_page;
                    if (now_page === 1){
                        page_str += '<li><sapn class="active1">上一页</sapn></li>';
                        page_str += '<li class="active" aria-current="page"><sapn >1</sapn></li>';
                        page_str += '<li><a href="javascript:getData(2)">2</a></li>';
                        page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                        page_str += '<li><a href="javascript:getData(2)">下一页</a></li>';
                    }else if(now_page === 2){
                        page_str += '<li><a href="javascript:getData(1)">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData(1)">1</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn >2</sapn></li>';
                        page_str += '<li><a href="javascript:getData(3)">3</a></li>';
                        page_str += '<li><a href="javascript:getData(4)">4</a></li>';
                        page_str += '<li><a href="javascript:getData(3)">下一页</a></li>';
                    }else if(now_page == max_page){
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+(now_page-2)+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+now_page-1+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><sapn>下一页</sapn></li>';
                    }else if (now_page == max_page-1){
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+now_page-2+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+now_page-1+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">'+now_page+1+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">下一页</a></li>';
                    }else{
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">上一页</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-2)+')">'+(now_page-2)+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page-1)+')">'+(now_page-1)+'</a></li>';
                        page_str += '<li class="active" aria-current="page"><sapn>'+now_page+'</sapn></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">'+(now_page+1)+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+2)+')">'+(now_page+2)+'</a></li>';
                        page_str += '<li><a href="javascript:getData('+(now_page+1)+')">下一页</a></li>';
                    }
                    page_str += '</ul>'
                    $('.paginate').empty();
                    $('.paginate').append(page_str);


                }else {
                    alert("当前没有数据")
                }
            })

    }
</script>
{% endblock %}